<template>
<!--下面加表格-->
<div v-loading="graphLoading">
  <h3 class="title">场景配置</h3>
  <div style="overflow: hidden">

<!--    <el-input v-model="inputValue" placeholder="请输入场景名" clearable style="width: 200px;"></el-input>-->
<!--    <el-button type="primary" class="el-icon-search" size="small" style="margin-left: 10px">查询</el-button>-->

    <el-select v-model="value4" clearable placeholder="请选择场景" style="width: 600px"  @change="test">
      <el-option
          v-for="item in sceneOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>

<!--    <el-button type="primary" style="margin-top: 10px;margin-left: 10px" class="el-icon-circle-plus-outline" v-show="this.value4.length>1" disabled>开启场景</el-button>-->
    <el-button type="primary" style="margin-top: 10px;margin-left: 10px" class="el-icon-circle-plus-outline"  @click="openScene">开启场景</el-button>
    <el-button type="primary" style="margin-top: 10px;margin-left: 10px" class="el-icon-circle-minus-outline"  @click="closeScene">关闭场景</el-button>
    <el-button type="primary" style="margin-top: 10px;" class="el-icon-circle-plus-outline" @click="addScene">新增场景</el-button>
    <el-input v-model="numberInput" placeholder="请输入数字,代表最近第几次数据" style="width: 250px;margin-left: 10px" @blur="inputChange"></el-input>
    <el-button type="primary" style="margin-left: 10px;float:right;" class="el-icon-download" size="small" @click="serverInfoExport">导出</el-button>

    <!--    <el-button type="primary" style="margin-top: 10px;" class="el-icon-circle-plus-outline" @click="sceneState='max'">test</el-button>-->
<!--    <el-button type="primary" style="margin-left: 10px" @click="compareScene" class="el-icon-c-scale-to-original" size="small" v-show="this.value4.length!==2" disabled>场景对比</el-button>-->
<!--    <el-button type="primary" style="margin-left: 10px" @click="compareScene" class="el-icon-c-scale-to-original" size="small" v-show="this.value4.length===2">场景对比</el-button>-->
    </div>
  <el-table
      class="InfoData"
      :data="this.$dataPage(this.sceneData,this.currentPage,this.pageSize).pageData"
      :header-cell-style="this.$handleheader"
      :row-style="this.$rowstyle"
      :cell-style="this.stateClass"
      border
  >
<!--    <el-table-column-->
<!--        type="selection"-->
<!--        width="55">-->
<!--    </el-table-column>-->
    <el-table-column
        prop="id"
        label="编号"
        align="center"
        sortable
        width="70">
    </el-table-column>
    <el-table-column
        prop="scene_name"
        label="场景名称"
        width="280px"
        header-align="center"
    />
    <el-table-column
        prop="function"
        label="场景介绍"
        header-align="center"
    />
    <el-table-column
        prop="location"
        label="场景路径"
        width="280px"
        header-align="center"
    />
    <el-table-column
        prop="state"
        label="状态"
        header-align="center"
        width="70"
    />
    <el-table-column
        prop="result"
        label="路数启动结果"
        header-align="center"
        width="100"
    />
    <el-table-column
        label="操作"
        header-align="center"
        align='center'
        width="200px"
    >
      <template slot-scope="scope">
         <el-button type="text" style="margin-left: 10px" @click="sceneDetailsForDialog(scope.row)">启动详情</el-button>
        <el-button type="text" style="margin-left: 10px" @click="editScene(scope.row)">修改</el-button>
        <el-button type="text" style="margin-left: 10px" @click="delScene(scope.row)">删除</el-button>
<!--        <el-button type="text" style="margin-left: 10px" @click="openScene(scope.row)" v-show="isOpen!==scope.row">开启此场景</el-button>-->
<!--        <el-button type="text" style="margin-left: 10px" @click="openScene(scope.row)" v-show="isOpen===scope.row">关闭此场景</el-button>-->
<!--        <el-button type="text" style="margin-left: 10px" @click="sceneControl" v-show="onOffVal===false">开启此场景数据收集</el-button>-->
<!--        <el-button type="text" style="margin-left: 10px" @click="sceneControl" v-show="onOffVal===true">关闭此场景数据收集</el-button>-->
<!--          <el-switch-->
<!--              style="display: inline;margin-left: 10px;margin-top: -10px"-->
<!--              v-model="value2"-->
<!--              active-color="#13ce66"-->
<!--              inactive-color="#ff4949"-->
<!--              active-text="开启此场景数据采集"-->
<!--              inactive-text="关闭此场景数据采集"-->
<!--          >-->
<!--          </el-switch>-->
      </template>
    </el-table-column>
  </el-table>
  <page :current-page="currentPage" :page-size="pageSize" :total="total" @handleChange="handleCurrentChange"></page>

  <div class="explain">注:同时只能启动一个场景！如果您在还有场景正在启动的情况下启动另一场景，则不会有数据变化。输入的数字代表最近第几次的数据，默认值为1</div>
  <div v-if="sceneState!=='none'">
<!--    最大路数的外层div-->
    <div style="display: flex;justify-content: space-between" v-if="sceneState==='max'||sceneState==='others'">
      <div style="width: 49%;">
        <el-table
            class="InfoData"
            :data="this.$dataPage(this.sceneDetailsData,this.currentDetailPage,this.pageDetailSize).pageData"
            :header-cell-style="this.$handleheader"
            :row-style="this.$rowstyle"
            :cell-style="this.$cellstyle"
            border
        >
          <el-table-column
              prop="detail"
              label="场景启动情况"
              header-align="center"
          />
          <el-table-column
              prop="scene_time"
              label="场景启动时间"
              header-align="center"
              :formatter="transTime"
          />
          <el-table-column
              prop="container_time"
              label="容器启动时间"
              width="140"
              header-align="center"
              :formatter="transTime"
          />
        </el-table>

        <page :current-page="currentDetailPage" :page-size="pageDetailSize" :total="detailTotal" @handleChange="handleCurrentDetailChange"></page>
      </div>
      <div id="max" style="width: 49%;" v-if="sceneState==='max'">
        <p style="text-align: center" v-show="realRamArea">内存占用率(%)</p>
        <div id="realRamArea" style="height: 150px;width: 100%;margin-top: 10px" >
        </div>
        <p style="text-align: center" v-show="realCpuArea">CPU占用率(%)</p>
        <div id="realCpuArea" style="height: 150px;width: 100%" ></div>
        <p style="text-align: center" v-show="realGpuArea">GPU1占用率(%)</p>
        <div id="realGpuArea" style="height: 150px;width: 100%"></div>
      </div>
      <div id="others" style="width: 49%;" v-if="sceneState==='others'">
        <p style="text-align: center">内存占用(MB)</p>
        <div id="realServerRamArea" style="height: 150px;width: 100%;margin-top: 10px;"></div>
        <p style="text-align: center">磁盘占用(MB)</p>
        <div id="realServerRomArea" style="height: 150px;width: 100%;margin-top: 10px"></div>
        <p style="text-align: center" v-show="realServerCpuArea">CPU占用率(%)</p>
        <div id="realServerCpuArea" style="height: 150px;width: 100%" ></div>
        <p style="text-align: center" v-show="realServerGpuArea">GPU1占用率(%)</p>
        <div id="realServerGpuArea" style="height: 150px;width: 100%"></div>
      </div>
    </div>
<!--    其余场景的div-->
<!--    <div id="otherScene" style="border: 1px solid red;height: 300px" v-if="sceneState==='others'"></div>-->
  </div>
<!--  修改和添加的弹窗-->
  <el-dialog
      :title="sceneMode"
      :visible.sync="sceneDialog"
      width="30%"
      :show-close=false>
    <el-form ref="sceneForm" :rules="rules" :model="sceneForm" label-width="100px">
      <el-form-item label="场景名称" prop="scene_name">
        <el-input v-model="sceneForm.scene_name"></el-input>
      </el-form-item>
      <el-form-item label="场景介绍" prop="function">
        <el-input v-model="sceneForm.function"></el-input>
      </el-form-item>
      <el-form-item label="场景路径" prop="location">
        <el-input v-model="sceneForm.location"></el-input>
      </el-form-item>
<!--      <el-form-item label="脚本类型" prop="type">-->
<!--        <el-input v-model="scriptsForm.type"></el-input>-->
<!--        <span>输入1表示自动运行，输入0表示手动运行</span>-->
<!--      </el-form-item>-->
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="sceneDialog = false">取 消</el-button>
    <el-button type="primary" @click="addOrEditScripts('sceneForm')">确 定</el-button>
  </span>
  </el-dialog>
<!--  详情弹窗-->
  <el-dialog
      title="场景启动详情选择"
      :visible.sync="sceneDetailsDialog"
      width="50%"
      :show-close=false>
    <el-input v-model="numberInput" label="请输入数字"></el-input>
    <span slot="footer" class="dialog-footer">
      <el-button @click="">确 定</el-button>
      <el-button @click="sceneDetailsDialog = false">关 闭</el-button>
  </span>
  </el-dialog>
  <el-dialog
      title="导出信息填写"
      :visible.sync="exportVisible"
      width="30%"
      :show-close="false"
      :close-on-click-modal="false">

    <el-form ref="form" :model="exportForm" label-width="80px" inline :rules="exportRules">
      <el-form-item label="文件名" prop="name">
        <el-input v-model="exportForm.name"></el-input>
      </el-form-item>
      <el-form-item label="高度" prop="height">
        <el-input v-model="exportForm.height"></el-input>
      </el-form-item>
      <el-form-item label="宽度" prop="width">
        <el-input v-model="exportForm.width"></el-input>
      </el-form-item>
    </el-form>
<!--    <span style="color: red">*高度建议不超过500，宽度不超过1000</span>-->
    <span style="color: red">{{wh}}</span>
    <span slot="footer" class="dialog-footer">
    <el-button @click="exportVisible = false">取 消</el-button>
    <el-button type="primary" @click="startExport('addScene',sceneData,'sceneData'),exportVisible=false" v-if="!sceneDetailsData">确 定</el-button>
      <el-button type="primary" @click="exportWord(exportForm.height,exportForm.width,'addScene2',exportForm.name),exportVisible=false" v-if="realRamArea">确 定 </el-button>
      <el-button type="primary" @click="exportWord(exportForm.height,exportForm.width,'addScene3',exportForm.name),exportVisible=false" v-if="realServerRamArea">确 定 </el-button>
  </span>
  </el-dialog>
</div>
</template>

<script>
import {Area, Line} from '@antv/g2plot';
import Page from "@/components/page";
import moment from "moment";
import {exportMixin} from "@/components/mixin";
import {toDataURL} from "@/components/exportFunction";
import JSZipUtils from "jszip-utils";
import PizZip from "pizzip";
import docxtemplater from "docxtemplater";
import {getWH} from "../components/getWH";
import {
  addScene,
  delScene,
  editScene,
  endScene, oneContainerCpuHistoryPerf, oneContainerGpuHistoryPerf, oneContainerRamHistoryPerf, oneContainerRealPerf,
  sceneList,
  sceneStartDetails,
  sceneStartTime, sceneStartTimeDetails,
  startScene
} from "@/api/perf";
import {historyCpuData, historyGpuData, historyRamData, historyRomData, realPerf} from "@/api/server";

export default {
  name: "addScene",
  components: {Page},
  mixins : [exportMixin],
  data() {
    const generateData = _ => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${ i }`,
          disabled: i % 4 === 0
        });
      }
      return data;
    };
    return {
      wh:'',
      data: generateData(),
      sceneMode:'',
      sceneDialog:false,
      sceneDetailsDialog:false,
      sceneForm:{
        scene_name:'',
        function:'',
        location:'',
        state:''
      },
      value4:'',
      sceneOptions:[],
      rules:{
        scene_name: [
          {required: true, message: '请输入场景名称', trigger: 'blur'},
        ],
        location: [
          {required: true, message: '请输入场景路径', trigger: 'blur'},
        ],
        function: [
          {required: true, message: '请输入场景功能', trigger: 'blur'},
        ],
      },
      sceneActiveName:'first',
      options: [{
        value: '选项1',
        label: '场景1'
      }, {
        value: '选项2',
        label: '场景2'
      }, ],
      value: '',
      addShow: false,
      sceneData:null,
      sceneDetailsData:null,
      value1: true,
      value2: true,
      sceneStatus:null,
      onOffVal:false,
      value3 :[1, 4],
      inputValue:'',
      isOpen:'',
      multiLine:'',
      currentDetailPage:1,
      detailTotal:null,
      pageDetailSize:10,
      currentPage:1,
      total:null,
      pageSize:10,
    //  场景选择状态控制：没选(none)，左右(max)
      sceneState:'none',
      realRamArea:null,
      realCpuArea:null,
      realGpuArea:null,
      realServerRamArea:null,
      realServerRomArea:null,
      realServerCpuArea:null,
      realServerGpuArea:null,
      Area:{
        realRamArea:null,
        realCpuArea:null,
        realGpuArea:null,
        realServerRamArea:null,
        realServerRomArea:null,
        realServerCpuArea:null,
        realServerGpuArea:null,
      },
      realRamData:[],
      realCpuData:[],
      realGpuData:[],
      realServerRamData:[],
      realServerRomData:[],
      realServerCpuData:[],
      realServerGpuData:[],
      realGraphInterval:null,
      realServerGraphInterval:null,
      realDataInterval: null,
      realServerDataInterval:null,
      detailInterval:null,
      clickRealInterval:null,
      graphLoading: false,
      numberInput:'1',
      openServerInterval: null
    }
  },
  beforeDestroy() {
    clearInterval(this.sceneStatus)
    this.sceneStatus=null
    clearInterval(this.realServerGraphInterval)
    this.realServerGraphInterval=null
    clearInterval(this.realGraphInterval)
    this.realGraphInterval=null
    clearInterval(this.realDataInterval)
    this.realDataInterval=null
    clearInterval(this.realServerDataInterval)
    this.realServerDataInterval=null
    clearInterval(this.detailInterval)
    this.detailInterval =null
    clearInterval(this.clickRealInterval)
    this.clickRealInterval = null
  },
  created() {
    setInterval(()=>{
      this.initSceneData()
    },3000)

    this.initSceneSelectData()

  },
  // watch:{
  //   realServerRamArea(oldVal, newVal) {
  //     console.log('serverold',oldVal);
  //     console.log('servernew',newVal)
  //     this.graphLoading = false
  //   },
  //   realRamArea(oldVal, newVal) {
  //     console.log('old',oldVal);
  //     console.log('new',newVal)
  //     this.graphLoading = false
  //   },
  //   graphLoading(oldVal, newVal) {
  //     console.log('graphold',oldVal);
  //     console.log('graphnew',newVal)
  //     console.log('graphLoading变了')
  //   }
  // },
  // mounted() {
  //   this.sceneStatus = setInterval(()=>{
  //     this.initSceneData()
  //   },300000)
  // },
  // mixins:[mixin],
  methods:{
    transTime(row,column) {
      return moment(row[column.property]).format('YYYY-MM-DD HH:mm:ss')
    },
    inputChange() {
      if (!this.numberInput.length) {
        this.$message.warning("此输入框不能为空!")
        this.numberInput = "1"
      }
    },
    test() {
      console.log(this.value4);
    },
    // handleCurrentChange(val){
    //   this.currentPage = val
    // },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    pyChange() {
      console.log(this.value2)
    },
    initSceneSelectData() {
      sceneList().then(res=>{
        for (let i =0;i<res.data.length;i++) {
          this.sceneOptions.push({
            value:res.data[i].scene_id,
            label:res.data[i].scene_id + '-' + res.data[i].scene_name
          })
        }
      })
    },
    initSceneData() {
      sceneList().then(res=>{
        this.sceneData =res.data
        this.total = res.data.length
        for (let i =0;i<res.data.length;i++) {
          this.sceneData[i].id = i + 1
          if(this.sceneData[i].state ===0){
            this.sceneData[i].state ='未启动'
          }else if(this.sceneData[i].state ===1){
            this.sceneData[i].state ='正在启动'
          }else if(this.sceneData[i].state ===2){
            this.sceneData[i].state ='已启动'
          }else {
            this.sceneData[i].state ='启动异常'
          }
        }
      })
    },
    addScene() {
      this.sceneMode='场景新增'
      this.sceneForm.function=''
      this.sceneForm.scene_name=''
      this.sceneForm.location=''
      this.sceneDialog = true
    },
    editScene(row) {
      this.sceneMode='场景修改'
      // this.scriptsForm=JSON.parse(JSON.stringify(row))
      this.sceneForm.location = JSON.parse(JSON.stringify(row.location))
      this.sceneForm.scene_name = JSON.parse(JSON.stringify(row.scene_name))
      this.sceneForm.function = JSON.parse(JSON.stringify(row.function))
      this.sceneForm.scene_id = JSON.parse(JSON.stringify(row.scene_id))
      this.sceneDialog=true
    },

    delScene(row) {
      // let res = confirm('确定要删除吗？')
      this.$confirm('确定要删除吗？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        delScene(row.scene_id).then(res=>{
          console.log(res);
          if (res.data==='场景删除成功'){
            // alert("删除成功")
            this.$message({
              type:'success',
              message: '场景删除成功'
            })
            this.initSceneData()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
      // if (res){
      //
      // }
    },
    addOrEditScripts(scriptsForm){
      console.log('?????')
      this.$refs[scriptsForm].validate((valid) => {
        if (valid) {
          if (this.sceneMode === '场景新增'){
            addScene(this.sceneForm).then(res=>{
            // axios.post(this.$ip2 + '/container/scene/add',this.sceneForm).then(res=>{
              console.log('asdasdasdas')
              if (res.data==='场景新增成功'){
                // alert('新增成功')
                this.$message({
                  type:'success',
                  message: '场景新增成功'
                })
                this.sceneDialog = false
                //重新获取数据实现局部刷新
                this.initSceneData()
              }
            })
          }
          else {

            editScene(this.sceneForm).then(res=>{
              console.log(res);
              if (res.data==='场景修改成功'){
                // alert('修改成功')
                this.$message({
                  type:'success',
                  message: '场景修改成功'
                })
                this.sceneDialog = false
                //重新获取数据实现局部刷新
                this.initSceneData()
              }
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    openScene(){
      if (this.value4!=='') {
        // if (confirm('请确定指令流和视频流没有同时开启')) {
        this.sceneDetails(this.value4)
        startScene(this.value4).then(async res=>{
        // axios.get(this.$ip2 +'/container/scene/start?scene_id=' + this.value4).then(async res=>{
          console.log('scene?',res)
          // 自动刷新
          this.initSceneData()
        })
        // }
      }
      else {
        // alert('未选择场景')
        this.$message({
          type:'warning',
          message: '未选择场景'
        })
      }
    },
    closeScene() {
      endScene(this.value4).then(res=>{
      // axios.get(this.$ip2 + '/container/scene/stop?scene_id=' + this.value4).then(res=>{
        if (res.data === '场景未启动') {
          // alert('场景未启动')
          this.$message({
            type:'warning',
            message: '场景未启动'
          })
        }
        else if (res.data === '场景关闭失败'){
          // alert('场景关闭失败')
          this.$message.error('场景关闭失败');
        }
        else {
          // alert("关闭成功")
          this.$message({
            type:'success',
            message: '关闭成功'
          })
          this.sceneState = 'none'
        }
        this.initSceneData()
      })
    },
    handleCurrentDetailChange(val) {
      this.currentDetailPage = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    sceneDetails(scene_id) {
      this.graphLoading = true
      sceneList().then(res=>{
      // axios.get(this.$ip2 + '/container/scene/all').then(res =>{
        for (let i=0;i<res.data.length;i++) {
          if (res.data[i].scene_id === scene_id) {
            clearInterval(this.detailInterval)
            this.detailInterval = null
            if (res.data[i].location.includes("Max",0)) {
              this.sceneState = 'max'
              clearInterval(this.realDataInterval)
              this.realDataInterval = null
              clearInterval(this.realGraphInterval)
              this.realGraphInterval = null
              clearInterval(this.realServerGraphInterval)
              this.realServerGraphInterval = null
              clearInterval(this.clickRealInterval)
              this.clickRealInterval = null
            }
            else {
              this.sceneState = 'others'
              clearInterval(this.realServerDataInterval)
              this.realServerDataInterval = null
              clearInterval(this.realServerGraphInterval)
              this.realServerGraphInterval = null
              clearInterval(this.realGraphInterval)
              this.realGraphInterval = null
              clearInterval(this.clickRealInterval)
              this.clickRealInterval = null
            }
          }
        }
          this.detailInterval = setInterval(()=>{
            sceneStartDetails(scene_id).then(async res=>{
            // axios.get(this.$ip2 +'/container/scenestart/all?scene_id=' + scene_id).then(async res=>{
              console.log('我的表格数据呢',res.data);
              this.sceneDetailsData =res.data
              this.detailTotal = res.data.length
              for (let i =0;i<res.data.length;i++){
                this.sceneDetailsData[i].container_time = moment(this.sceneDetailsData[i].container_time).format('YYYY-MM-DD HH:mm:ss')
                this.sceneDetailsData[i].scene_time = moment(this.sceneDetailsData[i].scene_time).format('YYYY-MM-DD HH:mm:ss')
              }
            })
          },5000)
        setTimeout(()=>{
          this.sceneState ==='others' ? this.getServerRealData() : this.getRealData()
        },5001)
      })
    },
    sceneDetailsForDialog(row){
      // if (row.state !=="未启动" && row.state !=="启动异常" ) {
        // 当看正在启动的内容时，不能指定number，将其置为''
        // if (row.state === '正在启动') {
        //   this.numberInput = ''
        // }
        this.baseAreaDestory()
        this.graphLoading = true
        // this.sceneDetailsDialog =true
        clearInterval(this.detailInterval)
        this.detailInterval = null
        // 判断是最大路数还是其他,并且清除之前的定时器
        if (row.location.includes("max",0)) {
          this.sceneState ='max'
          clearInterval(this.realDataInterval)
          this.realDataInterval = null
          clearInterval(this.realGraphInterval)
          this.realGraphInterval = null
          clearInterval(this.realServerGraphInterval)
          this.realServerGraphInterval = null
          clearInterval(this.clickRealInterval)
          this.clickRealInterval = null
          // this.getRealData()
          }
        else {
          this.sceneState ='others'
          clearInterval(this.realServerDataInterval)
          this.realServerDataInterval = null
          clearInterval(this.realServerGraphInterval)
          this.realServerGraphInterval = null
          clearInterval(this.realGraphInterval)
          this.realGraphInterval = null
          clearInterval(this.clickRealInterval)
          this.clickRealInterval = null
          // this.getServerRealData()
        }
        // 默认最近一次
        if (this.numberInput === '1') {
          sceneStartDetails(row.scene_id).then(async res=>{
            console.log('detailData',res.data);
            // axios.get(this.$ip2 +'/container/scenestart/all?scene_id=' + row.scene_id).then(res=>{
            this.sceneDetailsData =res.data
            for (let i =0;i<res.data.length;i++){
              this.sceneDetailsData[i].container_time = moment(this.sceneDetailsData[i].container_time).format('YYYY-MM-DD HH:mm:ss')
              this.sceneDetailsData[i].scene_time = moment(this.sceneDetailsData[i].scene_time).format('YYYY-MM-DD HH:mm:ss')
            }
            this.detailTotal = res.data.length
            if (row.state ==='正在启动') {
              clearInterval(this.detailInterval)
              this.detailInterval = null
              this.clickRealInterval = setInterval(()=>{
                sceneStartDetails(row.scene_id).then(res=>{
                // axios.get(this.$ip2 +'/container/scenestart/all?scene_id=' + row.scene_id).then(res=>{
                  console.log('我的表格数据呢neibu',res.data);
                  this.sceneDetailsData =res.data
                  for (let i =0;i<res.data.length;i++){
                    this.sceneDetailsData[i].container_time = moment(this.sceneDetailsData[i].container_time).format('YYYY-MM-DD HH:mm:ss')
                    this.sceneDetailsData[i].scene_time = moment(this.sceneDetailsData[i].scene_time).format('YYYY-MM-DD HH:mm:ss')
                  }
                  this.detailTotal = res.data.length
                  if (res.data.length === 10 && row.state !=='正在启动') {
                    clearInterval(this.clickRealInterval)
                    this.clickRealInterval = null
                    clearInterval(this.realServerGraphInterval)
                    this.realServerGraphInterval = null
                    clearInterval(this.realServerDataInterval)
                    this.realServerDataInterval = null
                    setTimeout(()=>{
                      this.initSceneData()
                    },6000)
                  }
                })
              },5000)
              this.sceneState ==='others'?this.getServerRealData():this.getRealData()
            }
            else if (row.state ==='已启动' || row.state ==='启动异常' || row.state ==='未启动') {
              this.sceneState ==='others' ? this.getServerHistoryData(row,null,null) : this.getHistoryData(row,null,null)
            }
          })
        }
        // 如果指定了最近的某次。这里能够保证正在启动的无法走这个条件
        else {
          console.log("3333")
          sceneStartTime(row.scene_id,this.numberInput).then(res=>{
            if (res.data === "场景还未启动过") {
              this.$message.error('场景还未启动过');
              this.graphLoading = false
              this.numberInput = ''
              return
            }
            else{
              console.log('aweisile2',res);
              // axios.get(this.$ip2 + '/container/scenestart/time?scene_id=' + row.scene_id + '&number=' + this.numberInput).then(res=>{
              if (res.data !=='场景启动次数错误') {
                this.sceneState ==='others' ? this.getServerHistoryData(row,res.data.start_time,res.data.end_time) : this.getHistoryData(row,res.data.start_time,res.data.end_time)
              }
              else {
                // alert('场景启动次数错误')
                this.$message.error('场景启动次数错误');
                this.graphLoading = false
              }
            }

          })
        }
    },
    getRealData() {
      // if (this.realRamArea) {
        this.baseAreaDestory()
      // }
      clearInterval(this.realDataInterval)
      this.realDataInterval = null
      console.log('来了哦哈哈哈');
      this.realDataInterval = setInterval(()=>{
        oneContainerRealPerf(this.$store.state.server.serverId).then(res=>{
        // axios.get(this.$ip2 +'/container/perf/get?container_id='+this.$store.state.server.serverId).then(res=>{
          console.log('来了哦',res);
          this.realRamData.push({
            timePeriod: this.getCurrentTime(),
            value: res.data.container_ram_used
          })
          this.realCpuData.push({
            timePeriod: this.getCurrentTime(),
            value: res.data.container_cpu_used
          })
          this.realGpuData.push({
            timePeriod: this.getCurrentTime(),
            value: res.data.container_gpu_used
          })
        })

      },3000)
      setTimeout(()=>{
        this.realGraph()
      },3000)

    },
    getServerRealData() {
      // if (this.realServerRamArea) {
        this.baseAreaDestory()
      // }
      console.log("我拿到状态了")
      clearInterval(this.realServerDataInterval)
      this.realServerDataInterval = null
      this.realServerDataInterval = setInterval(()=>{
        realPerf(this.$store.state.server.serverId).then(res=>{
        // axios.get(this.$ip2 + '/server/perf/get?server_id=' + this.$store.state.server.serverId).then(res=>{
          // console.log("服务器有没有",res.data)
          this.realServerRamData.push({
            timePeriod: this.getCurrentTime(),
            value: +res.data.server_ram_used
          })
          this.realServerRomData.push({
            timePeriod: this.getCurrentTime(),
            value: +res.data.server_rom_used
          })
          this.realServerCpuData.push({
            timePeriod: this.getCurrentTime(),
            value: +res.data.server_cpu_used
          })
          this.realServerGpuData.push({
            timePeriod: this.getCurrentTime(),
            value: +res.data.server_gpu_used
          })
          // console.log('看看',this.realServerGpuData);

        })
      },3000)
      // this.openServerInterval = setInterval(()=>{
      //   this.realServerGraph()
      // },3000)
      setTimeout(()=>{
        this.realServerGraph()
      },5000)
    },
    getHistoryData(row,st,et) {
      // if (this.realRamArea) {
        this.baseAreaDestory()
      // }
      console.log('最大路数 准备画图时的详情数据',this.sceneDetailsData);
      if (this.sceneDetailsData.length ===0) {
        this.$message.error("场景未启动过")
        this.graphLoading = false
        return
      }
      let startTime
      let endTime
      this.numberInput === '' || this.numberInput === '1' ? startTime = this.sceneDetailsData[0].scene_time : startTime = st
      this.numberInput === '' || this.numberInput === '1' ? endTime = this.sceneDetailsData[this.sceneDetailsData.length -1].container_time : endTime = et
      if (this.numberInput === ''){
        this.numberInput = '1'
      }
      sceneStartTime(row.scene_id,this.numberInput).then(async res=>{
        console.log('发送了历史容器数据查看请求',res.data);
        // axios.get(this.$ip2 +'/container/scenestart/all?scene_id=' + row.scene_id + '&number=' + this.numberInput).then(async res=>{
          this.sceneDetailsData =res.data
          this.detailTotal = res.data.length
          await this.ramDataGet(row.scene_id,startTime,endTime,1)
          await this.cpuDataGet(row.scene_id,startTime,endTime,1)
          await this.gpuDataGet(row.scene_id,startTime,endTime,1)
          // console.log('最大路数',this.realRamData);
           this.historyGraph()
        })
    },
    getServerHistoryData(row, st, et) {
      // if (this.realServerGpuArea) {
        this.baseAreaDestory()
      // }
      // this.sceneDetailsData.log
      if (this.sceneDetailsData.length === 0) {
        this.$message.error("场景未启动过")
        this.graphLoading = false
        return
      }
      let startTime
      let endTime
      this.numberInput === '' || this.numberInput === '1'? startTime = this.sceneDetailsData[0].scene_time : startTime = st
      this.numberInput === '' || this.numberInput === '1'? endTime = this.sceneDetailsData[this.sceneDetailsData.length -1].container_time : endTime = et
      if (this.numberInput === ''){
        this.numberInput = '1'
      }
      sceneStartTimeDetails(row.scene_id,this.numberInput).then(async res=>{

      // axios.get(this.$ip2 +'/container/scenestart/detail?scene_id=' + row.scene_id + '&number=' + this.numberInput).then(res=>{
        console.log('我只是看看wei',res.data);
        this.sceneDetailsData =res.data
        this.detailTotal = res.data.length
        await this.getServerHistroyGpuData(startTime,endTime,1)
        await this.getServerHistroyCpuData(startTime,endTime,1)
        await this.getServerHistroyRamData(startTime,endTime,1)
        await this.getServerHistroyRomData(startTime,endTime,1)
        console.log("历史这里的await生效灭")
        this.historyServerGraph()
      })
    },
    //画图
    realGraph() {
      this.realRamArea = new Area('realRamArea', {
        data: this.realRamData,
        xField: 'timePeriod',
        yField: 'value',
        xAxis: {
          range: [0, 1],
        },
      });
      this.realCpuArea = new Area('realCpuArea', {
        data: this.realCpuData,
        xField: 'timePeriod',
        yField: 'value',
        xAxis: {
          range: [0, 1],
        },
      });
      this.realGpuArea = new Area('realGpuArea', {
        data: this.realGpuData,
        xField: 'timePeriod',
        yField: 'value',
        xAxis: {
          range: [0, 1],
        },

      });
      this.realRamArea.render()
      this.realCpuArea.render()
      this.realGpuArea.render()
      this.realGraphInterval = setInterval(()=>{
        this.realCpuArea.changeData(this.realCpuData)
        this.realRamArea.changeData(this.realRamData)
        this.realGpuArea.changeData(this.realGpuData)
        // console.log(this.realRamData);
      },3000)
      this.graphLoading = false
    },
    realServerGraph() {
      // if (document.getElementById('realServerRamArea') !== null) {
      //   document.getElementById('realServerRamArea')
      // }
      // console.log('huangwei', document.getElementById('realServerRamArea'))
      // console.log('huangwei2', this.realServerRamData)
      this.realServerRamArea = new Area('realServerRamArea', {
        data: this.realServerRamData,
        xField: 'timePeriod',
        yField: 'value',
        // point: {
        //   size: 2,
        //   shape: 'custom-point',
        //   style: {
        //     fill: 'white',
        //     stroke: '#5B8FF9',
        //     lineWidth: 2,
        //   },
        // },
        // label:{
        //   visible:true,
        //   offsetX: 6,
        //   offsetY: 6,
        // },
        // yAxis:{
        //   //这是实现y轴固定的关键
        //   type:'linear',
        //   max: 257157,
        //   min:0,
        //   // tickCount:40,
        //
        // },
        xAxis: {
          range: [0, 1],
          // tickCount: 32,
          // label:{
          //   autoRotate:false,
          //   //这里是弧度而不是角度
          //   rotate:30.4,
          //   offsetX:-75
          // }
        },
        // slider: {
        //   start: 0,
        //   end: 1,
        // },

      });
      this.realServerCpuArea = new Area('realServerCpuArea', {
        data: this.realServerCpuData,
        xField: 'timePeriod',
        yField: 'value',
        // point: {
        //   size: 2,
        //   shape: 'custom-point',
        //   style: {
        //     fill: 'white',
        //     stroke: '#5B8FF9',
        //     lineWidth: 2,
        //   },
        // },
        // label:{
        //   visible:true,
        //   offsetX: 6,
        //   offsetY: 6,
        // },
        // yAxis:{
        //   //这是实现y轴固定的关键
        //   type:'linear',
        //   max: 100,
        //   min:0,
        //   // tickCount:40,
        //
        // },
        xAxis: {
          range: [0, 1],
          // tickCount: 32,
          // label:{
          //   autoRotate:false,
          //   //这里是弧度而不是角度
          //   rotate:30.4,
          //   offsetX:-75
          // }
        },
        // slider: {
        //   start: 0,
        //   end: 1,
        // },

      });
      this.realServerGpuArea = new Area('realServerGpuArea', {
        data: this.realServerGpuData,
        xField: 'timePeriod',
        yField: 'value',
        // point: {
        //   size: 2,
        //   shape: 'custom-point',
        //   style: {
        //     fill: 'white',
        //     stroke: '#5B8FF9',
        //     lineWidth: 2,
        //   },
        // },
        // label:{
        //   visible:true,
        //   offsetX: 6,
        //   offsetY: 6,
        // },
        // yAxis:{
        //   //这是实现y轴固定的关键
        //   type:'linear',
        //   max:100,
        //   min:0,
        //   // tickCount:40,
        //
        // },
        xAxis: {
          range: [0, 1],
          // tickCount: 32,
          // label:{
          //   autoRotate:false,
          //   //这里是弧度而不是角度
          //   rotate:30.4,
          //   offsetX:-75
          // }
        },
        // slider: {
        //   start: 0,
        //   end: 1,
        // },

      });
      this.realServerRomArea = new Area('realServerRomArea', {
        data: this.realServerRomData,
        xField: 'timePeriod',
        yField: 'value',
        // point: {
        //   size: 2,
        //   shape: 'custom-point',
        //   style: {
        //     fill: 'white',
        //     stroke: '#5B8FF9',
        //     lineWidth: 2,
        //   },
        // },
        // label:{
        //   visible:true,
        //   offsetX: 6,
        //   offsetY: 6,
        // },
        // yAxis:{
        //   //这是实现y轴固定的关键
        //   type:'linear',
        //   max: 1125144,
        //   min:0,
        //   // tickCount:40,
        //
        // },
        xAxis: {
          range: [0, 1],
          // tickCount: 32,
          // label:{
          //   autoRotate:false,
          //   //这里是弧度而不是角度
          //   rotate:30.4,
          //   offsetX:-75
          // }
        },
        // slider: {
        //   start: 0,
        //   end: 1,
        // },

      });
      this.realServerRamArea.render()
      this.realServerRomArea.render()
      this.realServerCpuArea.render()
      this.realServerGpuArea.render()
      this.realServerGraphInterval = setInterval(()=>{
        this.realServerCpuArea.changeData(this.realServerCpuData)
        this.realServerRamArea.changeData(this.realServerRamData)
        this.realServerRomArea.changeData(this.realServerRomData)
        this.realServerGpuArea.changeData(this.realServerGpuData)
        // console.log(this.realRamData);
      },500)
      this.graphLoading = false
    },
    historyGraph() {
      console.log("历史容器图已经来了，数据呢？",this.realRamData)
      this.realRamArea = new Line('realRamArea', {
        data: this.realRamData,
        xField: 'timePeriod',
        yField: 'value',
        xAxis: {
          range: [0, 1],
        },
      });
      this.realCpuArea = new Line('realCpuArea', {
        data: this.realCpuData,
        xField: 'timePeriod',
        yField: 'value',
        xAxis: {
          range: [0, 1],
        },
      });
      this.realGpuArea = new Line('realGpuArea', {
        data: this.realGpuData,
        xField: 'timePeriod',
        yField: 'value',
        xAxis: {
          range: [0, 1],
        },
      });
      this.realRamArea.render()
      this.realCpuArea.render()
      this.realGpuArea.render()
      console.log(this.realRamArea);
      this.graphLoading = false
      console.log('loaing',this.graphLoading)
    },
    historyServerGraph() {
      console.log("历史呢？a1",this.realServerRamData)
      this.realServerRamArea = new Line('realServerRamArea', {
        data: this.realServerRamData,
        xField: 'timePeriod',
        yField: 'value',
        xAxis: {
          range: [0, 1],
        },
      });
      this.realServerRomArea = new Line('realServerRomArea', {
        data: this.realServerRomData,
        xField: 'timePeriod',
        yField: 'value',
        xAxis: {
          range: [0, 1],
        },
      });
      this.realServerCpuArea = new Line('realServerCpuArea', {
        data: this.realServerCpuData,
        xField: 'timePeriod',
        yField: 'value',
        xAxis: {
          range: [0, 1],
        },
      });
      this.realServerGpuArea = new Line('realServerGpuArea', {
        data: this.realGpuData,
        xField: 'timeServerPeriod',
        yField: 'value',
        xAxis: {
          range: [0, 1],
        },
      });
      this.realServerRamArea.render()
      this.realServerRomArea.render()
      this.realServerCpuArea.render()
      this.realServerGpuArea.render()
      this.graphLoading = false
    },
    async ramDataGet(id,st,et,per=1) {
      await oneContainerRamHistoryPerf(id,moment(st).format('YYYY-MM-DD HH:mm:ss'),moment(et).format('YYYY-MM-DD HH:mm:ss'),per).then(res1=>{
      // axios.get(this.$ip2 + '/container/perf/ramtime?container_id=' + id + '&&start_time=' + moment(st).format('YYYY-MM-DD HH:mm:ss') + '&end_time=' + moment(et).format('YYYY-MM-DD HH:mm:ss') + '&period=' + per).then(res1 => {
        console.log('ramdata有啊',res1.data.ram_used);
        for (let i = 0; i < res1.data.ram_used.length; i++) {
          this.realRamData.push({
            timePeriod: moment(res1.data.ram_used[i][0]).format('YYYY-MM-DD HH:mm'),
            value: res1.data.ram_used[i][1]
          })
        }

      })
      console.log('ram',this.realRamData);
    },
    async cpuDataGet(id,st,et,per=1) {
      await oneContainerCpuHistoryPerf(id,moment(st).format('YYYY-MM-DD HH:mm:ss'),moment(et).format('YYYY-MM-DD HH:mm:ss'),per).then(res1=>{
      // axios.get(this.$ip2 + '/container/perf/cputime?container_id=' + id + '&&start_time=' + moment(st).format('YYYY-MM-DD HH:mm:ss') + '&end_time=' + moment(et).format('YYYY-MM-DD HH:mm:ss') + '&period=' + per).then(res1 => {
        for (let i = 0; i < res1.data.cpu_used.length; i++) {
          this.realCpuData.push({
            timePeriod: moment(res1.data.cpu_used[i][0]).format('YYYY-MM-DD HH:mm'),
            value: res1.data.cpu_used[i][1]
          })
        }
      })
      console.log('cpu',this.realRamData);

    },
    async gpuDataGet(id,st,et,per=1) {
      await oneContainerGpuHistoryPerf(id,moment(st).format('YYYY-MM-DD HH:mm:ss'),moment(et).format('YYYY-MM-DD HH:mm:ss'),per).then(res1=>{
            // axios.get(this.$ip2 + '/container/perf/gputime?container_id=' + id + '&&start_time=' + moment(st).format('YYYY-MM-DD HH:mm:ss') + '&end_time=' + moment(et).format('YYYY-MM-DD HH:mm:ss') + '&period=' + per).then(res1 => {
        for (let i = 0; i < res1.data.gpu_used.length; i++) {
          this.realGpuData.push({
            timePeriod: moment(res1.data.gpu_used[i][0]).format('YYYY-MM-DD HH:mm'),
            value: res1.data.gpu_used[i][1]
          })
        }
      })
      console.log('gpu',this.realRamData);

    },
    async getServerHistroyGpuData(st,et,per=1) {
      await historyGpuData(this.$store.state.server.serverId,st,et,per).then(res=>{
      // axios.get(this.$ip2 + '/server/perf/gputime?server_id='+this.$store.state.server.serverId+'&start_time=' + st +'&end_time=' + et + '&period=' + per).then(res =>{
        for (let i=0;i<res.data.length;i++)
        {
          // if (i===0) {
          //   // 如果初始时间没有 则手动添加
          //   if (moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss')!==moment(this.st).format('YYYY-MM-DD HH:mm:ss')){
          //     this.gpuDataArray.push({
          //       timePeriod: moment(this.st).format('YYYY-MM-DD HH:mm'),
          //       value: null
          //     })
          //   }
          // }
          this.realServerGpuData.push({
            timePeriod: moment(res.data[i][0]).format('YYYY-MM-DD HH:mm'),
            value: +res.data[i][1]
          })
          // if (i===res.data.length - 1){
          //   //如果最后选择的时间没有数据，则手动添加
          //   if (moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss')!==moment(this.et).format('YYYY-MM-DD HH:mm:ss')){
          //     this.gpuDataArray.push({
          //       timePeriod: moment(this.et).format('YYYY-MM-DD HH:mm'),
          //       value: null
          //     })
          //   }
          // }
        }

      })
      console.log('历史服务器GPU',this.realServerGpuData);
    },
    async getServerHistroyCpuData(st,et,per=1){
      await historyCpuData(this.$store.state.server.serverId,st,et,per).then(res=>{
      // axios.get(this.$ip2 + '/server/perf/cputime?server_id='+this.$store.state.server.serverId+'&start_time=' + st +'&end_time=' + et + '&period=' + per).then(res =>{
        for (let i=0;i<res.data.length;i++)
        {
          // if (i===0) {
          //   // 如果初始时间没有 则手动添加
          //   if (moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss')!==moment(this.st).format('YYYY-MM-DD HH:mm:ss')){
          //     this.totalCpuDataArray.push({
          //       timePeriod: moment(this.st).format('YYYY-MM-DD HH:mm'),
          //       value: null
          //     })
          //   }
          // }
          this.realServerCpuData.push({
            timePeriod: moment(res.data[i][0]).format('YYYY-MM-DD HH:mm'),
            value: +res.data[i][1]
          })
          // if (i===res.data.length - 1){
          //   //如果最后选择的时间没有数据，则手动添加
          //   if (moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss')!==moment(this.et).format('YYYY-MM-DD HH:mm:ss')){
          //     this.totalCpuDataArray.push({
          //       timePeriod: moment(this.et).format('YYYY-MM-DD HH:mm'),
          //       value: null
          //     })
          //   }
          // }
        }
      })
      console.log('历史服务器CPU',this.realServerCpuData);
    },
    async getServerHistroyRomData(st,et,per=1){
      await historyRomData(this.$store.state.server.serverId,st,et,per).then(res=>{
      // axios.get(this.$ip2 + '/server/perf/romtime?server_id='+this.$store.state.server.serverId+'&start_time=' + st +'&end_time=' + et + '&period=' + per).then(res =>{
        for (let i=0;i<res.data.length;i++)
        {
          // if (i===0) {
          //   // 如果初始时间没有 则手动添加
          //   if (moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss')!==moment(this.st).format('YYYY-MM-DD HH:mm:ss')){
          //     this.diskDataArray.push({
          //       timePeriod: moment(this.st).format('YYYY-MM-DD HH:mm'),
          //       value: null
          //     })
          //   }
          // }
          this.realServerRomData.push({
            timePeriod: moment(res.data[i][0]).format('YYYY-MM-DD HH:mm'),
            value: +res.data[i][1]
          })
          // if (i===res.data.length - 1){
          //   //如果最后选择的时间没有数据，则手动添加
          //   if (moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss')!==moment(this.et).format('YYYY-MM-DD HH:mm:ss')){
          //     this.diskDataArray.push({
          //       timePeriod: moment(this.et).format('YYYY-MM-DD HH:mm'),
          //       value: null
          //     })
          //   }
          // }
        }
      })
      console.log('历史服务器ROM',this.realServerRomData);
    },
    async getServerHistroyRamData(st,et,per=1){
      await historyRamData(this.$store.state.server.serverId,st,et,per).then(res=>{
      // axios.get(this.$ip2 + '/server/perf/ramtime?server_id='+this.$store.state.server.serverId+'&start_time=' + st +'&end_time=' + et + '&period=' + per).then(res =>{
        for (let i=0;i<res.data.length;i++)
        {
          // if (i===0) {
          //   // 如果初始时间没有 则手动添加
          //   if (moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss')!==moment(this.st).format('YYYY-MM-DD HH:mm:ss')){
          //     this.memoryDataArray.push({
          //       timePeriod: moment(this.st).format('YYYY-MM-DD HH:mm'),
          //       value: null
          //     })
          //   }
          // }
          this.realServerRamData.push({
            timePeriod: moment(res.data[i][0]).format('YYYY-MM-DD HH:mm'),
            value: +res.data[i][1]
          })
          // if (i===res.data.length - 1){
          //   //如果最后选择的时间没有数据，则手动添加
          //   if (moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss')!==moment(this.et).format('YYYY-MM-DD HH:mm:ss')){
          //     this.memoryDataArray.push({
          //       timePeriod: moment(this.et).format('YYYY-MM-DD HH:mm'),
          //       value: null
          //     })
          //   }
          // }
        }
      })
      console.log('历史服务器RAM',this.realServerRamData);
    },
    baseAreaDestory(){
      if (this.realRamArea) {
        // console.log('你咋不清？')
        this.realRamArea.destroy()
        this.realCpuArea.destroy()
        this.realGpuArea.destroy()
        this.realRamArea = null
        this.realCpuArea = null
        this.realGpuArea = null
        // console.log('realRamArea请了后啥情况',this.realRamArea);

      }
      if (this.realServerRamArea) {
        // console.log('你咋不清2？')
        this.realServerRamArea.destroy()
        this.realServerRomArea.destroy()
        this.realServerCpuArea.destroy()
        this.realServerGpuArea.destroy()
        this.realServerRamArea = null
        this.realServerRomArea = null
        this.realServerCpuArea = null
        this.realServerGpuArea = null
        // console.log('realServerRamArea请了后啥情况',this.realServerRamArea);
      }
      this.realRamData =[]
      this.realCpuData =[]
      this.realGpuData =[]
      this.realServerRamData =[]
      this.realServerRomData =[]
      this.realServerCpuData =[]
      this.realServerGpuData =[]
    },
    getCurrentTime() {
      //获取当前时间并打印
      let _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth()+1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
      // _this.gettime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
      // console.log(this.gettime)
      return yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
    },
    // 脚本状态单元格样式修改
    stateClass(row){
      if (row.columnIndex ===4 && row.row.state==='未启动'){
        return  {
          padding:'0px',
          backgroundColor:'hotpink',
          color:'#fff',
          height:'33px',
          lineHeight:'10px',
        }

      }
      else if (row.columnIndex ===4 && row.row.state==='正在启动'){
        return  {
          padding:'0px',
          backgroundColor:'green',
          color:'#fff',
          height:'33px',
          lineHeight:'10px',
        }
      }
      else if (row.columnIndex ===4 && row.row.state==='已启动'){
        return  {
          padding:'0px',
          backgroundColor:'yellowgreen',
          color:'#fff',
          height:'33px',
          lineHeight:'10px',
        }
      }
      else if (row.columnIndex ===4 && row.row.state==='启动异常'){
        return  {
          padding:'0px',
          backgroundColor:'red',
          color:'#fff',
          height:'33px',
          lineHeight:'10px',
        }
      }
      else {
        return  {
          padding:'0px',
          height:'33px',
          lineHeight:'10px',
        }
      }
    },
    serverInfoExport() {
      if (this.realServerRamArea) {
        this.wh = getWH('realServerRamArea')
      }
     else if (this.realRamArea) {
        this.wh = getWH('realRamArea')
      }
     else{
        this.wh = '没有图表，高宽可以不填'
      }
      this.exportVisible = true
    },
    getImg() {
      // var img = new Image();
      // img.src = this.chartInstance.getDataURL({
      //   pixelRatio: 2,
      //   backgroundColor: '#fff',
      //   type: 'png'
      // })
      if (this.realRamArea !== null) {
        this.Area.realRamArea = toDataURL(this.realRamArea.chart)
      }
      if (this.realCpuArea !== null) {
        this.Area.realRamArea = toDataURL(this.realCpuArea.chart)
      }
      if (this.realGpuArea !== null) {
        this.Area.realRamArea = toDataURL(this.realGpuArea.chart)
      }
      if (this.realServerRamArea !== null) {
        this.Area.realServerRamArea = toDataURL(this.realServerRamArea.chart)
      }
      if (this.realServerRomArea !== null) {
        this.Area.realServerRomArea = toDataURL(this.realServerRomArea.chart)
      }
      if (this.realServerCpuArea !== null) {
        this.Area.realServerCpuArea = toDataURL(this.realServerCpuArea.chart)
      }
      if (this.realServerGpuArea !== null) {
        this.Area.realServerGpuArea = toDataURL(this.realServerGpuArea.chart)
      }


      // this.tableData.imgUrl = img.src
      // console.log('src', toDataURL(this.line.chart))
    },
    // Echarts图片处理
    base64DataURLToArrayBuffer(dataURL) {
      const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
      if (!base64Regex.test(dataURL)) {
        return false;
      }
      const stringBase64 = dataURL.replace(base64Regex, "");
      let binaryString;
      if (typeof window !== "undefined") {
        binaryString = window.atob(stringBase64);
      } else {
        binaryString = new Buffer(stringBase64, "base64").toString("binary");
      }
      const len = binaryString.length;
      const bytes = new Uint8Array(len);
      for (let i = 0; i < len; i++) {
        const ascii = binaryString.charCodeAt(i);
        bytes[i] = ascii;
      }
      return bytes.buffer;
    },
    //导出为word
    exportWord(height,width,module,name) {
      this.getImg();
      //这里要引入处理图片的插件，下载docxtemplater后，引入的就在其中了
      const ImageModule = require('docxtemplater-image-module-free');
      const _this = this;
      //Word路径，在public文件下(CLI3)
      JSZipUtils.getBinaryContent(`${module}.docx`, function (error, content) {
        if (error) {
          throw error
        }
        let opts = {}
        opts.centered = true;
        opts.fileType = "docx";
        opts.getImage = (tag) => {
          return _this.base64DataURLToArrayBuffer(tag);
        }
        opts.getSize = () => {
          return [width, height]//这里可更改输出的图片宽和高
        }

        let zip = new PizZip(content);
        let doc = new docxtemplater();
        doc.attachModule(new ImageModule(opts));
        doc.loadZip(zip);
        // 这里是设置导出的数据
        doc.setData({
          sceneData : _this.sceneData,
          sceneDetailsData : _this.sceneDetailsData,
          Area : _this.Area
          // arr: _this.arr // 评语
        })
        try {
          doc.render()
        } catch (error) {
          var e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties,
          }
          console.log(JSON.stringify({
            error: e
          }));
          throw error;
        }
        const out = doc.getZip().generate({
          type: "blob",
          mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        })
        saveAs(out, `${name}.docx`)
      })
    },
  }
}
</script>

<style scoped>
</style>
